<!doctype html>
<style>
  .tallScroller {
    width: 1000px;
    height: 1000px;
    overflow: scroll;
    bottom: 0;
    right:0;
    position:absolute;
  }

  .tallScroller>.child {
    width: 4000px;
    height: 4000px;
  }
</style>

<div id="tallScroller" class="tallScroller" onscroll="on_subscroller_scroll()">
  <div class="child"></div>
</div>

<script>
// This is an internal iframe for
// virtual/percent-based-scrolling/max-percent-delta-cross-origin-iframes.html
var port;
function handleMessage(event) {
  if (event.data.hasOwnProperty('startScroll')) {
    port = event.source;
    tallScroller.scrollTop = 0;
    tallScroller.scrollLeft = 0;
  }
}

function on_subscroller_scroll() {
  port.postMessage({
    deltaY: tallScroller.scrollTop,
    deltaX: tallScroller.scrollLeft
  },"*");
}

window.addEventListener("message", handleMessage);
</script>
